<template>
	<view class="content">
		<view class="address gui-flex gui-align-items-center gui-space-between">
			<block v-if="addressInfo">
				<view class="address-content" style="color: #333;">
					{{ addressInfo.xiang }}
				</view>
				<view class="address-icon">
					<u-icon name="arrow-right" size="22rpx" color="#999"></u-icon>
				</view>
			</block>
			<block v-else>
				<view class="address-content">
					请选择收货地址
				</view>
				<view class="address-icon">
					<u-icon name="arrow-right" size="22rpx" color="#999"></u-icon>
				</view>
			</block>

		</view>
		<view class="shop">
			<view class="shop-item gui-flex" v-for="(item,i) in orderInfo.orderli" :key="i">
				<view class="shop-img gui-flex gui-align-items-center gui-justify-content-center">
					<image style="border-radius: 16rpx;" :src="tool.img(item.guiimage)" mode="aspectFill"></image>
				</view>
				<view class="shop-content">
					<view class="shop-name">
						{{ item.name }}
					</view>
					<view class="shop-idcr">
						{{ item.guiname }}
					</view>
					<view class="shop-footer">
						<view class="shop-price">
							￥{{ item.price }}
						</view>
						<view class="shop-num">
							x{{ item.num }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-item">
			<view class="order">
				<view class="order-left">
					配送方式
				</view>
				<view class="order-right" style="color: #ccc;">
					物流快递
				</view>
			</view>
			<view class="order">
				<view class="order-left">
					选择优惠券
				</view>
				<view class="order-right" style="color: #ccc;" @tap="couponShow = true">
					{{ coupontext }}
				</view>
			</view>
			<view class="order">
				<view class="order-left">
					商品金额
				</view>
				<view class="order-right neworder">
					￥{{ orderInfo.price }}
				</view>
			</view>
			<view class="order">
				<view class="order-left">
					运费
				</view>
				<view class="order-right neworder">
					￥<text>{{ orderInfo.yunfei }}</text>
				</view>
			</view>
		</view>
		<view class="footer-submit">
			<view class="submit-price">
				合计：￥<text v-if="total">{{ total }}</text>
			</view>
			<view class="submit-btn" @tap="OrderPay">
				提交订单
			</view>
		</view>
		<u-popup round="10" :show="couponShow" mode="bottom" @close="couponclose" @open="couponopen">
			<view class="coupon-box">
				<view class="coupon-title">
					请选择优惠券
				</view>
				<view class="coupon-list">
					<u-radio-group activeColor="#ff5502" v-model="radiovalue1" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '20px'}" v-for="(item, index) in orderInfo.couponli" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="coupon-bottom">
					<view class="coupon-btn">
						确认选择
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tool from '../../utils/tool.js'
	export default {
		computed: {
			total() {
				let num = 0
				num = Number(this.orderInfo.price) + Number(this.orderInfo.yunfei)
				return num
			}
		},
		data() {
			return {
				tool: tool,
				addressInfo: '', //地址信息
				order_id: '', //订单ID
				orderInfo: '', //订单信息
				couponShow: false,
				coupontext: '暂无可使用的优惠券',
			}
		},
		onLoad(options) {
			this.order_id = options.id
			this.GetAddress()
			this.GetoderInfo()
		},
		methods: {
			OrderPay() { //订单支付
				if (!this.addressInfo.id) {
					uni.showToast({
						title: '请选择地址信息'
					})
					return
				}
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/orderPay', {
					order_id: this.order_id,
					address_id: this.addressInfo.id,
					pei: 'kuai'
				}, (result) => {
					uni.hideLoading()
					let paymentInfo = result.data
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: paymentInfo.timeStamp,
						nonceStr: paymentInfo.nonceStr,
						package: paymentInfo.package,
						signType: paymentInfo.signType,
						paySign: paymentInfo.paySign,
						success(res) {
							uni.showToast({
								title: "支付成功"
							});
							setTimeout(res => {
								uni.reLaunch({
									url: '/pages/order/index'
								})
							}, 500)
						},
						fail(err) {
							uni.showToast({
								title: "支付失败",
								icon: 'error'
							});
							setTimeout(res => {
								uni.reLaunch({
									url: '/pages/order/index'
								})
							}, 500)
						},
					});
					console.log(result.data, '?')
				})
			},
			GetoderInfo() { //获取订单信息 
				this.$http.Post('order/orderInfo', {
					order_id: this.order_id
				}, (result) => {
					console.log(result)
					this.orderInfo = result.data
					if (this.orderInfo.yunfei == null) {
						this.orderInfo.yunfei = 0
					}
					if (this.orderInfo.couponli.length != 0) {
						this.coupontext = '请选择优惠券'
					}
				})
			},
			GetAddress() { //获取默认地址
				this.$http.Post('address/mo', {}, (result) => {
					this.addressInfo = result.data
				})
			},
			couponclose() {
				this.couponShow = false
			},
			couponopen() {
				this.couponShow = true
			},
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	.address {
		padding: 0 35rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.address-content {
		font-size: 28rpx;
		color: #999;
	}

	.shop {
		margin-top: 20rpx;
	}

	.shop-item {
		background-color: #fff;
		padding: 25rpx 35rpx;
		height: 250rpx;
	}

	.shop-img {
		width: 35%;
		height: 100%;
	}

	.shop-img>image {
		width: 220rpx;
		height: 220rpx;
	}

	.shop-content {
		position: relative;
		/* width: 65%; */
		height: 100%;
		padding: 0 25rpx 0 25rpx;
	}

	.shop-name {
		font-size: 32rpx;
		color: #3c3c3c;
		padding: 10rpx 0;
	}

	.shop-idcr {
		font-size: 26rpx;
		color: #999;
		padding: 15rpx 0;
	}

	.shop-footer {
		width: 90%;
		position: absolute;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-price {
		font-size: 32rpx;
		color: #ff5502;
	}

	.shop-num {
		font-size: 32rpx;
		color: #999;
	}

	.bai {
		width: 100%;
		text-align: right;
	}

	.order-item {
		margin-top: 20rpx;
	}

	.order {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 35rpx;
		background-color: #fff;
	}

	.order-left {
		color: #bebebe;
		width: 20%;
	}

	.order-right {
		width: 80%;
		display: flex;
		justify-content: flex-end;
	}

	.neworder {
		font-size: 32rpx;
		color: #ff5502;
	}

	.footer-submit {
		width: 100%;
		bottom: 0;
		position: fixed;
		background-color: #fff;
		height: 120rpx;
		border-top: 1rpx solid #f4f4f4;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.submit-price {
		font-size: 28rpx;
		color: #ff5502;
		margin-left: 35rpx;
	}

	.submit-btn {
		width: 260rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #ecc279;
		margin-right: 35rpx;
		border-radius: 999rpx;
	}
	
	.coupon-box {
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}
	
	.coupon-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}
	
	.coupon-list {
		padding: 25rpx 35rpx;
	}
	
	.c-list {
		padding: 20rpx 0;
	}
	
	.coupon-bottom {
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		height: 90rpx;
	}
	
	.coupon-btn {
		margin: 0 auto;
		width: 90%;
		height: 100%;
		border-radius: 999rpx;
		background-color: #fc6766;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}
</style>